<template>
    <div class="login-box">
        <div class="login-left">
            <img src="../../../public/static/logo.png" alt="">
        </div>
        <div class="login-right">
            <el-form :model="loginForm" ref="loginForm" label-width="100px" class="login-form" size="middle">
                <el-form-item>
                    <h1>登 录</h1>
                </el-form-item>
                <el-form-item
                    label="账号"
                    prop="username"
                    :rules="[
                    { required: true, message: '账号不能为空'},
                    ]"
                >
                    <el-input v-model.number="loginForm.username" autocomplete="off">
                         <i slot="prefix" class="el-input__icon el-icon-user"></i>
                    </el-input>
                </el-form-item>
                <el-form-item
                    label="密码"
                    prop="password"
                    :rules="[
                    { required: true, message: '密码不能为空'},
                    ]"
                >
                    <el-input v-model.number="loginForm.password" autocomplete="off" type="password">
                        <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="captchaCode" :rules="[{ required: true, message: '验证码不能为空'},]">
                    <el-row>
                      <el-col :span="15">
                        <el-input v-model="loginForm.captchaCode" autocomplete="off"></el-input>
                      </el-col>
                      <el-col :span="5">
                        <img :src="loginForm.captchaUrl" style="width: 110px" @click="getCode"/>
                      </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="margin-top: 40px;">
                    <el-button style="width: 300px" :loading="loading" type="primary" @click="submitForm('loginForm')" plain>
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import {getCaptcha} from '@/api/system/login.api.js'
import md5 from 'js-md5';
    export default {
        name: 'Login',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                    captchaUrl: '',
                    captchaCode: ''
                },
                captchaKey:'',
                loading: false
            }
        },
        methods: {
            async submitForm() {
                this.$refs.loginForm.validate(async (valid) => {
                    if(valid) {
                        const data = {
                            username: this.loginForm.username,
                            password:md5(this.loginForm.password),
                            headers: {
                                "Captcha-Key": this.captchaKey,
                                "Captcha-Code": this.loginForm.captchaCode,
                                "Tenant-Id": "000000",
                            }
                        }
                        // this.$router.push({
                        //     path: '/wel/index'
                        // });
                        // 发起登录
                        await this.$store.dispatch('Login',data)
                        // .then(()=>{
                        //     this.$router.push({
                        //         path: '/wel/index'
                        //     });
                        // }).catch(error=>{
                        //     this.loading = false;
                        //     // this.getCode();
                        // })
                        this.$router.push({
                                path: '/wel/index'
                        }).catch(err => { console.log(err) })
                    }
                })
           },
           // 获取验证码
           getCode() {
              getCaptcha().then(res=>{
                this.loginForm.captchaUrl = res.image;
                this.captchaKey =res.key;
            })
           }
        },
        mounted() {
           this.getCode();
        }
    }
</script>

<style lang="scss" scoped>
.login-box {
    width: 1000px;
    height: 600px;
    margin: 100px auto;
    border: 1px solid #dcdfe6;
    border-radius: 37px;
    padding: 12px;
    .login-left {
        position: relative;
        float: left;
        width: 55%;
        height: 100%;
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
        background: linear-gradient(312deg,#3c76ff,#7760fb);
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 60%;
        }
    }
    .login-right {
        position: relative;
        float: right;
        width: 45%;
        height: 100%;
        .login-form {
            height: 100%;
            display: flex;
            margin: 0 30px;
            flex-direction: column;
            justify-content: center;
            h1 {
                text-align: center;
            }
        }
    }
}
</style>